import QtQuick 2.15

Item {
    id:_itemShadedBackground
    property int nHeight: 50
    property int leftSpacing: 10
    property int rightSpacing: 10
    property int nWidth: 188

    property alias text: _text.text
    property alias font: _text.font
    property alias radius: _rectangleBackground.radius
    property alias picWidth: _image.width
    property alias picHeight: _image.height
    property alias picSource: _image.source
    property int spacing: 6

    property var picNormal
    property var picHover
    property var picPress
    property var picDisable

    signal clicked()

    property var colorBackgroundNormal: Gradient{
        orientation:Gradient.Horizontal
        GradientStop { position: 0.0; color: "#FFF2FFFE" }
        GradientStop { position: 0.25; color: "#FFF0FEF3" }
        GradientStop { position: 0.75; color: "#FFFAFFEF" }
        GradientStop { position: 1.0; color: "#FFFFF7EF" }
    }
    property var colorBackgroundHover: Gradient{
        orientation:Gradient.Horizontal
        GradientStop { position: 0.0; color: "#FFD2FFFB" }
        GradientStop { position: 0.25; color: "#FFC9FDD0" }
        GradientStop { position: 0.75; color: "#FFF5FEC5" }
        GradientStop { position: 1.0; color: "#FFFFE4C5" }
    }
    property var colorBackgroundPress: Gradient{
        orientation:Gradient.Horizontal
        GradientStop { position: 0.0; color: "#FFD2FFFB" }
        GradientStop { position: 0.25; color: "#FFC9FDD0" }
        GradientStop { position: 0.75; color: "#FFF5FEC5" }
        GradientStop { position: 1.0; color: "#FFFFE4C5" }
    }
    property var colorBackgroundDisable: Gradient{
        orientation:Gradient.Horizontal
        GradientStop { position: 0.0; color: "#0D000000" }
        GradientStop { position: 1.0; color: "#0D000000" }
    }

    property var colorBackgroundBorderNormal: "#D8E2EA"
    property var colorBackgroundBorderHover:"#D8E2EA"
    property var colorBackgroundBorderPress:"#D8E2EA"
    property var colorBackgroundBorderDisable:"#D8E2EA"

    property var colorTextNormal:"#FF26344C"
    property var colorTextHover:"#FF26344C"
    property var colorTextPress:"#FF26344C"
    property var colorTextDisable:"#4D26344C"

    implicitHeight:nHeight
    implicitWidth:{
        var nTmp = nWidth - _itemShadedBackground.leftSpacing - _itemShadedBackground.rightSpacing
        if((_image.width + _itemShadedBackground.spacing + _text.contentWidth) < nTmp){
            return nWidth
        }
        else{
            return _image.width + _itemShadedBackground.spacing + _text.contentWidth + _itemShadedBackground.leftSpacing + _itemShadedBackground.rightSpacing
        }
    }


    Rectangle{
        id:_rectangleBackground
        radius: 8
        anchors.fill: parent
        gradient:enabled?colorBackgroundNormal:colorBackgroundDisable
        border.width:enabled?1:0
        border.color:colorBackgroundBorderNormal

        Item {
            id:_itemConent
            anchors.centerIn: parent
            width: {
                return _image.width + _itemShadedBackground.spacing + _text.contentWidth
            }
            Image{
                id:_image
                width: 24
                height: 24
                source: enabled?picNormal:picDisable
                anchors.verticalCenter: parent.verticalCenter
                mipmap: true
                fillMode:Image.PreserveAspectFit
            }

            Text {
                id:_text
                anchors.left: _image.right
                anchors.leftMargin: spacing
                color: enabled?colorTextNormal:colorTextDisable
                font.pixelSize: 14
                anchors.verticalCenter: parent.verticalCenter
            }
        }
    }

    MouseArea{
        anchors.fill: parent
        acceptedButtons: Qt.LeftButton
        hoverEnabled: true

        onClicked: {
            _itemShadedBackground.clicked()
        }

        onPressed: {
            _rectangleBackground.gradient = colorBackgroundPress
            _rectangleBackground.border.color=colorBackgroundBorderPress
            _text.color = colorTextPress
            _image.source = picPress
        }

        onEntered:{
            _rectangleBackground.gradient = colorBackgroundHover
            _rectangleBackground.border.color=colorBackgroundBorderHover
            _text.color = colorTextHover
            _image.source = picHover
        }

        onExited: {
            _rectangleBackground.gradient = colorBackgroundNormal
            _rectangleBackground.border.color=colorBackgroundBorderNormal
            _text.color = colorTextNormal
            _image.source = picNormal
        }
    }

}
